<script setup lang="ts">
import AppHandle from '@/layout/appHandle.vue';
import Menu from '@/layout/menu.vue';
import AutoAccept from '@/LcuApi/autoAccept'; // 自动接受对局
import clientOnline from '@/LcuApi/clientOnline'
import { useAppStore } from '@/stores/app'
import { useClientStore } from '@/stores/client'
import ClientNoConnect from '@/views/ClientNoConnect.vue';
import { GetConfig } from '@wails/program/programfunc'
import { computed, onMounted } from 'vue';

GetConfig().then(res => {
  useAppStore().settingChange(JSON.parse(res), false)
})

// 根据puuid判断是否连接
const isClientOnline = computed(() => {
  return !!useClientStore().userInfo?.puuid
})

// 初次进入，获取英雄联盟进程是否正在运行
onMounted(() => {
  clientOnline.getClientInfo()
  new AutoAccept()
})
</script>

<template>
  <div class="App w-full h-full flex p-10px pt-3px" :style="{ 'padding-left': isClientOnline ? 0 : '10px' }">
    <div v-if="isClientOnline" class="app_menu">
      <Menu />
    </div>
    <div class="flex-grow-1 flex flex-col">
      <AppHandle />
      <div class="app_main">
        <div class="app_main_content h-full">
          <!-- 登录后展示 -->
          <transition name="fade-in" mode="out-in">
            <transition v-if="isClientOnline" name="fade-in">
              <router-view v-slot="{ Component }">
                <keep-alive include="Overview,MatchAssistant">
                  <component :is="Component" />
                </keep-alive>
              </router-view>
            </transition>
            <ClientNoConnect v-else />
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@import url('@/assets/css/font.scss');
@import url('@/assets/css/variable.scss');
@import url('@/assets/css/main.scss');
@import url('@/assets/css/arco.scss');

body {
  .arco-icon {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5;
  }

  .App {
    background-image: linear-gradient(180deg, #C5BDEA, #ED9CB3);
    font-family: 'D-DIN-Bold', 'HarmonyOS_Sans', 'Microsoft YaHei', sans-serif;

    .app_menu {
      width: var(--menu-width);
      height: 100%;
      animation: fadeIn .7s ease-out;

      @keyframes fadeIn {
        from {
          width: 10px;
          opacity: 0;
        }

        to {
          width: var(--menu-width);
          opacity: 1;
        }
      }
    }

    .app_main {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      background-color: var(--main-bg-color);
      border-radius: var(--border-radius);
      overflow: hidden;
    }
  }
}

.fade-in-enter-active,
.fade-in-leave-active {
  transition: opacity 0.5s ease;
}

.fade-in-enter-from,
.fade-in-leave-to {
  opacity: 0;
}
</style>
